
<ion-header>

  <ion-navbar>
    <ion-title>配置场景</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list >
    <div style="display: flex;align-items: center;justify-content:center">
      <div style="flex: 1">
        <ion-item style="padding-left: 0">
          <ion-label >场景名称</ion-label>
          <ion-input  [(ngModel)]="new_scene_name" ></ion-input>
        </ion-item>
      </div>
    </div>

    <div style="display: flex;align-items: center;justify-content:center">
      <div style="flex: 1">
        <ion-item style="padding-left: 0">
          <ion-label >场景图标</ion-label>
          <ion-select [(ngModel)]="new_scene_icon">
            <ion-option value="a">a</ion-option>
            <ion-option value="b">b</ion-option>
            <ion-option value="c">c</ion-option>
            <ion-option value="d">d</ion-option>
            <ion-option value="e">e</ion-option>
            <!--<ion-option value="a"><ion-icon name="boat" style="color: coral"></ion-icon></ion-option>-->
            <!--<ion-option value="b"><ion-icon name="book"  style="color: coral"></ion-icon></ion-option>-->
            <!--<ion-option value="c"><ion-icon name="build"  style="color: coral"></ion-icon></ion-option>-->
            <!--<ion-option value="d"><ion-icon name="bulb"  style="color: coral"></ion-icon></ion-option>-->
            <!--<ion-option value="e"><ion-icon name="car"  style="color: coral"></ion-icon></ion-option>-->
          </ion-select>
        </ion-item>
      </div>
    </div>
  </ion-list>

  <div style="text-align: center">
    <h2>选择设备</h2>
    <div class="choose-device-div">
      <div  style="display: flex;text-align: center;">

        <div style="flex: 1">
          <ion-icon id="dev0" name="sunny" class="home-scene-icon" style="color: coral"  (press)="pressEvent($event,0)"></ion-icon>
          <p  id="devname0">电视</p>
        </div>
        <div style="flex: 1">
          <ion-icon id="dev1" name="snow" class="home-scene-icon" style="color: pink" (press)="pressEvent($event,1)"></ion-icon>
          <p id="devname1">灯</p>
        </div>
        <div style="flex: 1">
          <ion-icon id="dev2" name="plane" class="home-scene-icon" style="color: lightskyblue" (press)="pressEvent($event,2)"></ion-icon>
          <p id="devname2">空调</p>
        </div>
        <div style="flex: 1">
          <ion-icon id="dev3" name="musical-notes" class="home-scene-icon" style="color: cyan" (press)="pressEvent($event,3)"></ion-icon>
          <p id="devname3">热水器</p>
        </div>
      </div>
      <div  style="display: flex;text-align: center;">
        <div style="flex: 1" (click)="goto_device()">
          <ion-icon name="add-circle" class="home-scene-icon" style="color: coral"></ion-icon>
          <p>添加设备</p>
        </div>
        <div style="flex: 1">
        </div>
        <div style="flex: 1">
        </div>
        <div style="flex: 1">
        </div>
      </div>

    </div>
  </div>

  <div style="text-align: center">
    <button ion-button color="secondary">确认修改</button>
  </div>

</ion-content>
